<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向导航栏</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            background-color: gray;
            overflow: hidden;
            list-style-type: none;
            /*position: fixed;*/
            /*width: 100%;*/
        }
        li{
            float: left;
        }
        li a, .dropbtn{
           text-decoration: none;
            text-align: center;
            color: white;
            display: block;
            width: 85px;
            padding: 5px;
        }
        li a:hover{
            background-color: black;
        }
        .dropdown{
            display: inline-block;
        }
        .dropdown-content{
            display: none;
            position:absolute;
            background-color: darkgrey;
            min-width: 85px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .dropdown-content a{
            color: white;
            padding: 10px;
            text-decoration: none;
            text-align: center;
            display: block;
        }
        .dropdown-content a:hover{
            background-color: black;
        }
        .dropdown:hover .dropdown-content{
            display: block;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="百度注册.html">首页</a></li>
    <li><a href="百度注册.html">最新上映</a></li>
    <li><a href="百度注册.html">高分经典</a></li>
    <div class="dropdown">
        <a  class="dropbtn" href="百度注册.html">分类</a>
        <div class="dropdown-content">
            <a href="百度登录.html">爱情片</a>
            <a href="百度登录.html">悬疑片</a>
            <a href="百度登录.html">科幻片</a>
        </div>
    </div>
    <li><a href="百度注册.html" style="float: right">关于</a></li>
    <!--为什么没有右移效果-->
</ul>
</body>
</html>